@import '@views/live/cc/assets/styles/mixin.scss';
.chat-main {
  position: absolute;
  left: 10px;
  top: 0;
  right: 0;
  bottom: 0;
  width: 260px;
  .chat-title {
    height: 40px;

    background-color: #f1f1f1;
    z-index: 1;
  }

  .chat-title h2 {
    position: relative;
    font-weight: 400;
    font-size: 16px;
    line-height: 40px;
    text-indent: 45px;
    color: #333;
  }

  .chat-title h2 i {
    position: absolute;
    top: 10px;
    left: 15px;
    width: 20px;
    height: 22px;
    background-image: url(~@views/live/cc/assets/images/live-icons.png);
    background-repeat: no-repeat;
    background-position: 0 -50px;
  }
  .chat-people {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    width: 20px;
    height: 20px;
    background-image: url(~@views/live/cc/assets/images/icons.png);
    background-repeat: no-repeat;
    background-position: -366px -56px;
    cursor: pointer;
  }
  /* 用户列表 */
  .userlist {
    position: absolute;
    right: 7px;
    top: 40px;
    display: none;
    width: 100px;
    padding: 8px 10px;
    background-color: #1d3243;
    border-radius: 3px;
    z-index: 99;

    .h6,
    a {
      font-size: 12px;
      color: #fff;
    }

    .h6 {
      padding: 5px 0 10px;
    }

    li {
      margin-bottom: 0.3em;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    a,
    a:hover {
      text-decoration: none;
    }

    li a {
      position: relative;
      display: block;
      width: 92px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .icons {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      float: left;
      width: 17px;
      height: 17px;
      margin-right: 5px;
    }

    .icons.boy {
      background-image: url(~@views/live/cc/assets/images/live-icons.png);
      background-repeat: no-repeat;
      background-position: 0 -125px;
    }

    .icons.girl {
      background-image: url(~@views/live/cc/assets/images/live-icons.png);
      background-repeat: no-repeat;
      background-position: 0 -100px;
    }

    .icons.ct {
      width: 42px;
      background-image: url(~@views/live/cc/assets/images/live-icons.png);
      background-repeat: no-repeat;
      background-position: 0 -145px;
    }

    .icons.aid {
      width: 30px;
      background-image: url(~@views/live/cc/assets/images/live-icons.png);
      background-repeat: no-repeat;
      background-position: 0 -165px;
    }

    i.curr {
      position: absolute;
      top: -6px;
      right: 6px;
      width: 14px;
      height: 6px;
      background-image: url(~@views/live/cc/assets/images/live-icons.png);
      background-repeat: no-repeat;
      background-position: -65px -275px;
    }

    .people-list {
      position: absolute;
      top: 35px;
      right: 8px;
      display: none;
      width: 130px;
      background-color: #fff;
      border: 1px solid #ddd;
      z-index: 1;
    }
  }

  .chat-list {
    position: absolute;
    left: 0;
    top: 40px;
    right: 0;
    width: 260px;
    height: auto;
    background-color: #fff;
    overflow: hidden;
    border-top: 1px solid #ddd;
    .chat-content-wrap {
      padding: 20px 10px 0;
      width: 100%;
      position: relative;
      box-sizing: border-box;
      @include clearfix;
      .chat-name {
        width: 100%;
        @include ellipsis();
        font-size: 12px;
        font-weight: 400;
        color: #666;
      }
      .chat-name-wrap {
        width: 100%;
        @include clearfix();
        .chat-name-from {
          float: left;
          font-size: 12px;
          font-weight: 400;
          color: #666;
          @include ellipsis();
        }
        .chat-name-from:after {
          content: '对：';
          margin-left: 5px;
          font-size: 12px;
          font-weight: 400;
          color: #666;
        }
        .chat-name-to {
          float: left;
          font-size: 12px;
          font-weight: 400;
          color: #666;
          @include ellipsis();
        }
        .chat-name-to:after {
          content: '说：';
          margin-left: 5px;
          font-size: 12px;
          font-weight: 400;
          color: #666;
        }
        .self {
          color: #666;
        }
      }
      .chat-message {
        position: relative;
        float: left;
        max-width: 160px;
        margin-top: 5px;
        padding: 10px 12px 8px;
        background-color: #f7f7f7;
        border: 1px solid #eee;
        border-radius: 4px;
        margin-left: 10px;
        color: rgb(51, 51, 51);
        line-height: 1.4;
        font-size: 12px;
        overflow-wrap: break-word;
        font-family: 微软雅黑, Arial;
        img {
          width: 24px;
        }
      }
      .chat-message:after {
        content: '';
        position: absolute;
        left: -7px;
        top: 10px;
        width: 7px;
        height: 10px;
        background-image: url(~@views/live/cc/assets/images/live-icons2.png);
        background-repeat: no-repeat;
        background-position: -25px -120px;
      }
    }

    .chat-content-right {
      .chat-name {
        text-align: right;
        color: #e67410;
      }
      .chat-name-wrap {
        float: right;
        .chat-name-from {
          float: right;
        }
        .chat-name-to {
          float: right;
        }
        clear: both;
      }
      .chat-message {
        float: right;
        background: #ffaa5f;
        border: 1px solid #ff902e;
      }
      .chat-message:after {
        left: inherit;
        right: -7px;
        background-position: -35px -135px;
      }
    }
  }

  .emoji-table {
    position: absolute;
    top: -75px;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-top: 1px solid #dcdcdc;
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0;
    li {
      cursor: pointer;
      padding: 2px;
      margin-bottom: 0;
      img {
        width: 20px;
      }
    }
  }
  #chat-options {
    width: 122px;
    font-size: 12px;
    vertical-align: 1px;
    display: none;
    position: absolute;
    bottom: 22px;
    right: 22px;
    border: 1px solid #ddd;
    background: #fff;
    max-height: 160px;
    overflow: auto;
  }
  #chat-options li {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 8px;
    height: 20px;
    line-height: 20px;
    cursor: default;
    color: #333;
  }
  #chat-options li:hover {
    background: #41a8ee;
    color: #fff;
  }

  .select-span {
    display: inline-block;
    background: #ffffff;
    border: 1px solid #dddddd;
    width: 114px;
    height: 20px;
    padding-left: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: -7px;
    cursor: pointer;
    color: #333;
  }
  .p-arrow {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(~@views/live/cc/assets/images/up.png) no-repeat;
    position: absolute;
    top: 0;
    right: 20px;
  }
  .select-active {
    border: 1px solid #55baf9;
  }
  .select-active .p-arrow {
    background: url(~@views/live/cc/assets/images/down.png) no-repeat;
  }
  a.btn-chat {
    position: absolute;
    right: 0;
    color: #fff;
    background-color: #57b8f4;
    width: 38px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
  }
  a.btn-chat:hover {
    background-color: #0f97e5;
  }

  .chat-send-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 36px;
    width: 180px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 3px;
    overflow-y: auto;
    outline: none;
    box-sizing: border-box;
  }

  .chat-send {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    *width: 260px;
    height: 85px;
    background-color: #f1f1f1;
    border-top: 1px solid #ddd;
  }

  .chat-tools .lrb-t .o-t {
    position: absolute;
    right: 0;
    padding-left: 22px;
    color: #333;
    font-family: Arial;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
  }

  .chat-tools .lrb-t .o-t.right {
    right: 100px;
  }

  .chat-tools .lrb-t .o-t.right.show {
    display: none;
  }

  .chat-tools .lrb-t .o-t i {
    position: absolute;
    top: 2px;
    left: 0;
    width: 16px;
    height: 16px;
    background-image: url(~@views/live/cc/assets/images/live-icons.png);
    background-repeat: no-repeat;
    background-position: -20px -80px;
  }

  .chat-tools .lrb-t .o-t i.active {
    background-image: url(~@views/live/cc/assets/images/live-icons.png);
    background-repeat: no-repeat;
    background-position: 0 -80px;
  }
}
